//等待页面 元素都加载完毕再运行
window.addEventListener('load', function() {
    // 获取元素
    var focus = document.querySelector('.focus');
    var ul = focus.children[0];
    var ol = focus.children[1];
    // 取得focus盒子的宽度 因为ul的移动距离是的宽度
    var w = focus.offsetWidth;
    // 定义一个索引号 用于小白点的变化
    var index = 0;
    // 设置定时器
    var timer = setInterval(function() {
        index++;
        // 使用c3里面的transform 动画效果进行移动 
        // 移动距离及时ul里面li的索引号 * 盒子的宽度 取负值
        tranAll();
    }, 2000);
    //等过度完成之后再去判断 监听过度事件 transitionend 无缝滚动 
    ul.addEventListener('transitionend', function() {
        // 如果移动到最后一张照片 快速跳回到第一张
        if (index >= 3) {
            index = 0;
            tranNone();
        }
        // 如果用户向左滑 快速到达最后一张
        if (index < 0) {
            index = 2;
            tranNone();
        }
        //圆点变化
        //把ol里面li 所有带有current的类名去掉
        ol.querySelector('li.current').classList.remove('current');
        //让当前索引号 的小li 加上current
        ol.children[index].classList.add('current');
    });
    // 手指滑动效果
    var startX = 0;
    var moveX = 0;
    var flag = false;
    ul.addEventListener('touchstart', function(e) {
        // startX = e.targetTouches[0].pageX;
        // 取得当手指点击的时候x坐标
        startX = e.targetTouches[0].pageX;
        // 当手指滑动时 关闭定时器 
        clearInterval(timer);
    });
    ul.addEventListener('touchmove', function(e) {
        // 滑动的距离
        moveX = e.targetTouches[0].pageX - startX;
        var tranlateX = -index * w + moveX;
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + tranlateX + 'px)';
        flag = true;
        e.preventDefault();
    });
    ul.addEventListener('touchend', function(e) {
        if (flag) {
            if (Math.abs(moveX) > 50) {
                if (moveX > 0) {
                    index--;
                } else {
                    index++;
                }
                tranAll();
            } else {
                tranAll();
            }

        }
        // 先清除定时器 在开启定时器 以保证页面只有一个定时器
        clearInterval(timer);
        timer = setInterval(function() {
            index++;
            tranAll();
        }, 2000);
    });

    function tranAll() {
        var tranlateX = -index * w;
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX(' + tranlateX + 'px)';
    };

    function tranNone() {
        var tranlateX = -index * w;
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + tranlateX + 'px)';
    }
    //返回顶部 制作
    var goBack = document.querySelector('.goBack');
    var nav = document.querySelector('.nav');
    var w = nav.offsetTop;
    window.addEventListener('scroll', function() {
        if (window.pageYOffset >= w) {
            goBack.style.display = 'block';
        } else {
            goBack.style.display = 'none';
        }
    });
    goBack.addEventListener('click', function() {
        window.scroll(0, 0);
    })
});